<dom-module id="hongliu-ajax">
    <template>
        <button on-click="sendXMLHttpRequest">sendXMLHttpRequest</button>

        <div>
            Computed Binding HeadersProperty:
            <span>{{computeHeadersProperty(csrfToken)}}</span>
        </div>
        <div>
            Computed Property HeadersProperty:
            <span>{{headersProperty}}</span>
        </div>
        <div>
            Computed Binding HeadersToken:
            <span>{{computeHeadersToken(csrfToken)}}</span>
        </div>
        <div>
            Computed Property HeadersToken:
            <span>{{headersToken}}</span>
        </div>
        <template>
            <button on-click="sendXMLHttpRequest">sendXMLHttpRequest</button>
            <iron-ajax
                    id="ajax"
                    method="POST"
                    url=""
                    handle-as="json"
                    headers="{{computeHeadersProperty(csrfToken)}}"
            >
            </iron-ajax>
        </template>

    </template>
    <script>
        Polymer({
            is: 'hongliu-ajax',

            // properties: {
            //     csrfToken: {
            //         type: String,
            //         value: 'aBcDeF'
            //     },
            //     headersProperty: {
            //         type: String,
            //         computed: 'computeHeadersProperty(csrfToken)'
            //     },
            //     headersToken: {
            //         type: String,
            //         computed: 'computeHeadersToken(csrfToken)'
            //     }
            //
            // },

            properties: {
                csrfToken: {
                    type: String,
                    value: 'aBcDeF'
                },
                headersProperty: {
                    type: String,
                    computed: 'computeHeadersProperty(csrfToken)'
                },
                headersToken: {
                    type: String,
                    computed: 'computeHeadersToken(csrfToken)'
                }
            },

            sendXMLHttpRequest: function () {
                // ajax call
                //console.log("Headers in AJAX: " + this.$.ajax.headers);
                this.$.ajax.url = "http://127.0.0.1:8080/login";
                this.$.ajax.body = this.headersProperty;
                this.$.ajax.generateRequest();
            },

            computeHeadersProperty: function (csrfToken) {
                return {"X-CSRF-Token": ' + csrfToken'};

            }
        });
    </script>
</dom-module>